<template>
	<div id="app">
		<div class="flexBox">
			<div v-for="(item,index) in 10">{{item}} 大哥大</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'app',
		components: {

		},
		data() {
			return {
				//响应式布局配置4
				screenWidth: document.body.clientWidth
			}
		},
		methods: {},
		mounted() {

			//响应式布局配置1
			const that = this
			window.onresize = () => {
				return (() => {
					window.screenWidth = document.body.clientWidth
					that.screenWidth = window.screenWidth
				})()
			}
		},
		watch: {
			//响应式布局配置2
			screenWidth(val) {
				// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
				if (!this.timer) {
					// 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
					this.screenWidth = val
					this.timer = true
					let that = this
					setTimeout(function() {
						// 打印screenWidth变化的值
						console.log(that.screenWidth)
						that.timer = false
					}, 400)
				}
			}
		}
	}
</script>

<style lang="scss">
	//响应式布局配置3
	@import "./style/global.scss";

	#app {
		font-family: 'Avenir', Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased; //对字体进行抗锯齿渲染   可以使字体看起来会更清晰舒服 它仅适用于Mac OS X / macOS。
		-moz-osx-font-smoothing: grayscale;


		.flexBox {
			display: -webkit-flex;
			/* Safari */
			display: flex; //flex布局
			flex-direction: row; //flex-direction排列方向   flex-direction: row | row-reverse | column | column-reverse;
			flex-wrap: wrap; //flex-wrap:是否换行,选项有:nowrap (默认)不换行 | wrap 换行 | wrap-reverse;反向换行换行
			justify-content: flex-start; //justify-content属性定义了项目在主轴上的对齐方式。选项有:flex-start | flex-end | center | space-between | space-around; 

			// align-items:flex-end; // align-items属性定义项目在交叉轴上如何对齐。 flex-start | flex-end | center | baseline | stretch;  暂时未发现什么意义
			// align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 暂时未发现什么意义


			div {
				width: 6.25rem;
				height: 6.25rem;
				background-color: white;
			}

			div:nth-child(5) {
				order: -1; // 	order: <integer>; order属性定义项目的排列顺序。  子元素在父元素的排序数值越小，排列越靠前，默认为0。
				flex-grow: 0; //  default 0 flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
				flex-shrink: 1; //default 1 flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
				flex-basis: auto; //default auto flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
				//建议优先写该属性,减少浏览器推算次数 flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
				// align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
			}

		}
	}
</style>
